import { Card } from '@/Card';
import { Paths } from '@/Paths';
import Button from '@/component/Button';
import Show from '@/component/Show';
import { useCallback, useRef, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './style.module.less';
import { Space } from '../Space';
import { Text } from '@/gimd';
import { Tag } from '@/component/Tag';
import { ITag } from '@/api/fetch_all_tags';
import { Dropdown } from '@/component/Dropdown';
import { ApiHttp } from '@/network/ApiHttp';
import useToast, { Toast } from '@/component/Toast';

export interface IArticleListItemProps {
  articleId: string;
  title: string;
  date: string;
  content: string;
  isMe: boolean;
  tags: ITag[];
  visibility?: number,
  onClickDelete?(articleId: string): void;
  onClickEditTags?(articleId: string): void;
  onClickTag?(tag: ITag): void;
}

export function ArticleListItem(props: IArticleListItemProps) {
  const { articleId, title, date, content, isMe: is_mine, visibility, onClickDelete, onClickEditTags, tags, onClickTag } = props;
  const nav = useNavigate();
  const ref_ele = useRef<HTMLDivElement>(null);
  const on_click_title = useCallback(() => nav(Paths.All.Article.replace(":article_id", articleId)), [articleId, nav]);
  const on_click_edit = useCallback(() => nav(Paths.All.Edtior + "?article_id=" + articleId), [articleId, nav]);
  const on_click_delete = useCallback(() => onClickDelete?.(articleId), [articleId, onClickDelete]);
  const on_click_edit_tags = useCallback(() => onClickEditTags?.(articleId), [articleId, onClickEditTags]);
  const [pending, set_pending] = useState(false)
  const [toast] = useToast()
  const set_visibility = (visibility: number) => {
    set_pending(true)
    ApiHttp.post(`blog/save_article_visibility`, void 0, { id: articleId, visibility })
      .then(() => {
        toast('OK!')
      }).finally(() => {
        set_pending(false)
      });
  }
  return (
    <Card
      title={
        <Button size='s' onClick={on_click_title}>
          <Text tag='h2' className={styles.title}>{title}</Text>
        </Button>
      }
      className={styles.entry_item}>
      <div className={styles.content} ref={ref_ele} dangerouslySetInnerHTML={{ __html: content }} />
      <div className={styles.bottom}>
        <Space size='s' align_item='center'>
          <Show yes={tags.length}>
            <Text type='secondary' size='s'>标签:</Text>
          </Show>
          {tags.map((v, idx) => <Tag key={idx} type='link' onClick={() => onClickTag?.(v)}>{v.title}</Tag>)}
        </Space>
        <div style={{ flex: 1 }} />
        <Space size='s' align_item='center'>
          <Show yes={is_mine}>
            <Dropdown
              size='m'
              triggers={['click', 'hover']}
              menu={{
                items: [
                  { children: '全体可见', onClick: () => set_visibility(0), disabled: pending },
                  { children: '仅自己可见', onClick: () => set_visibility(1), disabled: pending }
                ]
              }} >
              <Button size='s' title="设置可见性">
                {['全体可见', '仅自己可见'][visibility ?? 0]}
              </Button>
            </Dropdown>
          </Show>
          <Show yes={is_mine}>
            <Button size='s' title="编辑标签" onClick={on_click_edit_tags}>
              标签
            </Button>
          </Show>
          <Show yes={is_mine} >
            <Button size='s' title="删除该文章" onClick={on_click_delete}>
              删除
            </Button>
          </Show>
          <Show yes={is_mine}>
            <Button size='s' title="编辑该文章" onClick={on_click_edit}>
              编辑
            </Button>
          </Show>
          <Button size='s' title="查看全文" onClick={on_click_title}>
            全文
          </Button>
          <span className={styles.post_date}> {date} </span>
        </Space>
      </div>
    </Card>
  );
}
